<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画天气卡片 | Apple Design</title>
    <style>
        :root {
            --primary-color: #0071e3;
            --card-bg: rgba(30, 30, 35, 0.8);
            --card-border: rgba(255, 255, 255, 0.1);
            --text-color: #ffffff;
            --shadow-color: rgba(0, 0, 0, 0.25);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a1a2e, #16213e, #1a1a2e);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            color: var(--text-color);
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .weather-card {
            position: relative;
            width: 250px;
            height: 350px;
            background: var(--card-bg);
            border-radius: 24px;
            box-shadow: 0 10px 30px var(--shadow-color);
            padding: 1.5rem;
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid var(--card-border);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .weather-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        
        .card-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .weather-type {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .temperature {
            font-size: 3rem;
            font-weight: 300;
            margin: 1rem 0;
        }
        
        .location {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 0.5rem;
        }
        
        .date {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.5);
        }
        
        .weather-details {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .detail {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .detail-value {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }
        
        .detail-label {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }
        
        .control-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 12px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s ease;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .control-btn.active {
            background: var(--primary-color);
        }
        
        h1 {
            margin-bottom: 2rem;
            font-weight: 500;
            font-size: 2rem;
            text-align: center;
        }
        
        /* 风天气动画 */
        .windy-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.5;
        }
        
        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            filter: blur(10px);
        }
        
        .cloud-1 {
            width: 80px;
            height: 30px;
            top: 50px;
            left: -30px;
            animation: wind-cloud 12s linear infinite;
        }
        
        .cloud-2 {
            width: 60px;
            height: 25px;
            top: 120px;
            left: -40px;
            animation: wind-cloud 8s linear infinite;
        }
        
        .cloud-3 {
            width: 70px;
            height: 20px;
            top: 180px;
            left: -50px;
            animation: wind-cloud 15s linear infinite;
        }
        
        .wind-line {
            position: absolute;
            height: 2px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }
        
        .wind-line-1 {
            width: 50px;
            top: 100px;
            left: -50px;
            animation: wind-line 3s linear infinite;
        }
        
        .wind-line-2 {
            width: 80px;
            top: 150px;
            left: -80px;
            animation: wind-line 4s linear infinite;
        }
        
        .wind-line-3 {
            width: 60px;
            top: 200px;
            left: -60px;
            animation: wind-line 3.5s linear infinite;
        }
        
        @keyframes wind-cloud {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(350px);
            }
        }
        
        @keyframes wind-line {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(350px);
            }
        }
        
        /* 雨天动画 */
        .rainy-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .rain-drop {
            position: absolute;
            width: 2px;
            background: linear-gradient(to bottom, transparent, rgba(120, 220, 255, 0.8));
            border-radius: 50%;
        }
        
        .puddle {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 15px;
            background: rgba(120, 220, 255, 0.2);
            border-radius: 50%;
            filter: blur(3px);
        }
        
        .rain-drop-splash {
            position: absolute;
            bottom: 35px;
            width: 8px;
            height: 8px;
            background: rgba(120, 220, 255, 0.4);
            border-radius: 50%;
            animation: splash-fade 0.5s linear forwards;
            opacity: 0;
        }
        
        @keyframes splash-fade {
            0% {
                transform: scale(0);
                opacity: 0.7;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        
        /* 晴天动画 */
        .sunny-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: radial-gradient(circle at 50% 120px, rgba(255, 200, 100, 0.5), transparent 60%);
        }
        
        .sun {
            position: absolute;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 80px;
            background: linear-gradient(to bottom right, #ffdc7c, #ff9933);
            border-radius: 50%;
            box-shadow: 0 0 40px rgba(255, 200, 100, 0.6);
            animation: pulse 3s infinite alternate;
        }
        
        .sun-ray {
            position: absolute;
            top: 50%;
            left: 50%;
            background: linear-gradient(to right, rgba(255, 200, 100, 0.8), transparent);
            height: 2px;
            transform-origin: left center;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 40px rgba(255, 200, 100, 0.6);
                transform: translateX(-50%) scale(1);
            }
            100% {
                box-shadow: 0 0 60px rgba(255, 200, 100, 0.8);
                transform: translateX(-50%) scale(1.05);
            }
        }
        
        /* 下雪动画 */
        .snowy-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .snowflake {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            filter: blur(1px);
        }
        
        .snow-pile {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        }
        
        @keyframes snow-fall {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            100% {
                transform: translateY(350px) rotate(360deg);
            }
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }
            
            .weather-card {
                width: 100%;
                max-width: 320px;
            }
        }
    </style>
</head>
<body>
    <h1>精美天气动画卡片</h1>
    
    <div class="controls">
        <button class="control-btn active" data-weather="all">全部显示</button>
        <button class="control-btn" data-weather="windy">多风</button>
        <button class="control-btn" data-weather="rainy">降雨</button>
        <button class="control-btn" data-weather="sunny">晴天</button>
        <button class="control-btn" data-weather="snowy">下雪</button>
    </div>
    
    <div class="container">
        <!-- 大风天气卡片 -->
        <div class="weather-card" data-type="windy">
            <div class="windy-bg">
                <div class="cloud cloud-1"></div>
                <div class="cloud cloud-2"></div>
                <div class="cloud cloud-3"></div>
                <div class="wind-line wind-line-1"></div>
                <div class="wind-line wind-line-2"></div>
                <div class="wind-line wind-line-3"></div>
            </div>
            <div class="card-content">
                <div>
                    <div class="card-header">
                        <div>
                            <div class="weather-type">多风</div>
                            <div class="location">北京市</div>
                            <div class="date">5月12日 星期三</div>
                        </div>
                    </div>
                    <div class="temperature">22°</div>
                </div>
                <div class="weather-details">
                    <div class="detail">
                        <div class="detail-value">32km/h</div>
                        <div class="detail-label">风速</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">45%</div>
                        <div class="detail-label">湿度</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">10km</div>
                        <div class="detail-label">能见度</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 下雨天气卡片 -->
        <div class="weather-card" data-type="rainy">
            <div class="rainy-bg">
                <div class="puddle"></div>
                <!-- 雨滴将由JS动态生成 -->
            </div>
            <div class="card-content">
                <div>
                    <div class="card-header">
                        <div>
                            <div class="weather-type">降雨</div>
                            <div class="location">上海市</div>
                            <div class="date">5月12日 星期三</div>
                        </div>
                    </div>
                    <div class="temperature">18°</div>
                </div>
                <div class="weather-details">
                    <div class="detail">
                        <div class="detail-value">12km/h</div>
                        <div class="detail-label">风速</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">85%</div>
                        <div class="detail-label">湿度</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">5km</div>
                        <div class="detail-label">能见度</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 晴天天气卡片 -->
        <div class="weather-card" data-type="sunny">
            <div class="sunny-bg">
                <div class="sun"></div>
                <!-- 阳光射线将由JS动态生成 -->
            </div>
            <div class="card-content">
                <div>
                    <div class="card-header">
                        <div>
                            <div class="weather-type">晴天</div>
                            <div class="location">广州市</div>
                            <div class="date">5月12日 星期三</div>
                        </div>
                    </div>
                    <div class="temperature">32°</div>
                </div>
                <div class="weather-details">
                    <div class="detail">
                        <div class="detail-value">8km/h</div>
                        <div class="detail-label">风速</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">40%</div>
                        <div class="detail-label">湿度</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">25km</div>
                        <div class="detail-label">能见度</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 下雪天气卡片 -->
        <div class="weather-card" data-type="snowy">
            <div class="snowy-bg">
                <div class="snow-pile"></div>
                <!-- 雪花将由JS动态生成 -->
            </div>
            <div class="card-content">
                <div>
                    <div class="card-header">
                        <div>
                            <div class="weather-type">下雪</div>
                            <div class="location">哈尔滨市</div>
                            <div class="date">5月12日 星期三</div>
                        </div>
                    </div>
                    <div class="temperature">-5°</div>
                </div>
                <div class="weather-details">
                    <div class="detail">
                        <div class="detail-value">5km/h</div>
                        <div class="detail-label">风速</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">70%</div>
                        <div class="detail-label">湿度</div>
                    </div>
                    <div class="detail">
                        <div class="detail-value">3km</div>
                        <div class="detail-label">能见度</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化天气动画
            initWeatherAnimations();
            
            // 设置控制按钮事件
            setupControlButtons();
        });
        
        function initWeatherAnimations() {
            // 初始化雨滴动画
            createRaindrops();
            
            // 初始化阳光射线
            createSunrays();
            
            // 初始化雪花
            createSnowflakes();
            
            // 启动雨滴落下和飞溅动画
            animateRaindrops();
        }
        
        function createRaindrops() {
            const rainyBg = document.querySelector('.rainy-bg');
            
            // 创建50个雨滴
            for (let i = 0; i < 50; i++) {
                const drop = document.createElement('div');
                drop.className = 'rain-drop';
                
                // 随机设置雨滴属性
                const height = Math.random() * 20 + 15;
                const left = Math.random() * 100;
                const delay = Math.random() * 5;
                const duration = Math.random() * 1 + 1; // 1-2秒的下落时间
                
                drop.style.height = `${height}px`;
                drop.style.left = `${left}%`;
                drop.style.animation = `rain-fall ${duration}s linear ${delay}s infinite`;
                drop.style.opacity = Math.random() * 0.4 + 0.4;
                
                rainyBg.appendChild(drop);
            }
        }
        
        function createSunrays() {
            const sun = document.querySelector('.sun');
            
            // 创建12条阳光射线
            for (let i = 0; i < 12; i++) {
                const ray = document.createElement('div');
                ray.className = 'sun-ray';
                
                const angle = i * 30;
                const length = Math.random() * 40 + 80; // 80-120px长度
                const width = Math.random() * 1 + 1; // 1-2px宽度
                const animationDelay = Math.random() * 3;
                
                ray.style.width = `${length}px`;
                ray.style.height = `${width}px`;
                ray.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
                ray.style.animation = `sun-ray-pulse 3s ease-in-out ${animationDelay}s infinite alternate`;
                
                sun.appendChild(ray);
            }
        }
        
        function createSnowflakes() {
            const snowyBg = document.querySelector('.snowy-bg');
            
            // 创建60个雪花
            for (let i = 0; i < 60; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                
                // 随机设置雪花属性
                const size = Math.random() * 4 + 2;
                const left = Math.random() * 100;
                const delay = Math.random() * 10;
                const duration = Math.random() * 5 + 8; // 8-13秒的下落时间
                
                snowflake.style.width = `${size}px`;
                snowflake.style.height = `${size}px`;
                snowflake.style.left = `${left}%`;
                snowflake.style.top = `-${size}px`;
                snowflake.style.animation = `snow-fall ${duration}s linear ${delay}s infinite`;
                
                snowyBg.appendChild(snowflake);
            }
        }
        
        function animateRaindrops() {
            const rainyBg = document.querySelector('.rainy-bg');
            const raindrops = document.querySelectorAll('.rain-drop');
            
            // 雨滴落下后的飞溅效果
            raindrops.forEach(drop => {
                // 计算从顶部到底部的距离（减去雨滴自身高度）
                const distance = 350 - parseFloat(drop.style.height);
                const duration = parseFloat(drop.style.animation.split(' ')[1]);
                const delay = parseFloat(drop.style.animation.split(' ')[3]);
                
                // 在雨滴到达底部时创建飞溅效果
                setInterval(() => {
                    const splash = document.createElement('div');
                    splash.className = 'rain-drop-splash';
                    splash.style.left = drop.style.left;
                    rainyBg.appendChild(splash);
                    
                    // 飞溅效果完成后移除元素
                    setTimeout(() => {
                        splash.remove();
                    }, 500);
                }, duration * 1000);
            });
        }
        
        function setupControlButtons() {
            const buttons = document.querySelectorAll('.control-btn');
            const cards = document.querySelectorAll('.weather-card');
            
            buttons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮上的active类
                    buttons.forEach(btn => btn.classList.remove('active'));
                    
                    // 给当前点击的按钮添加active类
                    this.classList.add('active');
                    
                    const weatherType = this.getAttribute('data-weather');
                    
                    // 显示或隐藏对应的卡片
                    if (weatherType === 'all') {
                        cards.forEach(card => {
                            card.style.display = 'block';
                        });
                    } else {
                        cards.forEach(card => {
                            if (card.getAttribute('data-type') === weatherType) {
                                card.style.display = 'block';
                            } else {
                                card.style.display = 'none';
                            }
                        });
                    }
                });
            });
        }
        
        // 为雨滴添加CSS动画
        const styleSheet = document.styleSheet || document.createElement('style');
        styleSheet.innerHTML = `
            @keyframes rain-fall {
                0% {
                    transform: translateY(-20px);
                }
                100% {
                    transform: translateY(350px);
                }
            }
            
            @keyframes sun-ray-pulse {
                0% {
                    opacity: 0.4;
                    width: 80px;
                }
                100% {
                    opacity: 0.7;
                    width: 100px;
                }
            }
        `;
        document.head.appendChild(styleSheet);
    </script>
</body>
</html>
